﻿<div class="ui-widget-content">
    <h3>Resizable - Introdução</h3>
    <p>O resizable transforma elementos HTML em objetos redimensionáveis. Fazer isso é simples:</p>
    <p class="codigo">$("#meu_resizable").resizable();</p>
    <p>De forma muito semelhante ao draggable, o resizable também pode ter seu movimento restringido de algumas formas, tais como:</p>
    <div id="tabs_resizable">
        <ul>
            <li><a href="#tab_resize_padrao">Padrão</a></li>
            <li><a href="#tab_resize_horizontal">Horizontal</a></li>
            <li><a href="#tab_resize_vertical">Vertical</a></li>
            <li><a href="#tab_resize_estranho">Algumas direções</a></li>
            <li><a href="#tab_resize_tudo">Todas as direções</a></li>
            <li><a href="#tab_resize_parent">Dentro do elemento pai</a></li>
            <li><a href="#tab_resize_seletor">Dentro de um seletor</a></li>
            <li><a href="#tab_resize_grid">Grid</a></li>
            <li><a href="#tab_resize_tempo">Tempo</a></li>
            <li><a href="#tab_resize_distancia">Distância</a></li>
            <li><a href="#tab_resize_minimo">Tamanho mínimo</a></li>
            <li><a href="#tab_resize_maximo">Tamanho máximo</a></li>
            <li><a href="#tab_resize_proporcao">Proporção</a></li>
            <li><a href="#tab_resize_combinacao">Combinação</a></li>
        </ul>
        <div id="tab_resize_padrao">
            <div class="resizable_default resizable_na_tab">
                <p><strong>Redimensionamento padrão (direita e abaixo)</strong></p>
                <span class="codigo">$("#meu_resizable").resizable();</span>
            </div>
        </div>
        <div id="tab_resize_horizontal">
            <div class="resizable_horizontal resizable_na_tab">
                <p><strong>Apenas horizontalmente</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({handles: "w, e"});</span>
            </div>
        </div>
        <div id="tab_resize_vertical">
            <div class="resizable_vertical resizable_na_tab">
                <p><strong>Apenas verticalmente</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({handles: "n, s"});</span>
            </div>
        </div>
        <div id="tab_resize_estranho">
            <div class="resizable_estranho resizable_na_tab">
                <p><strong>Em algumas direções</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({handles: "n, sw, e"});</span>
            </div>
        </div>
        <div id="tab_resize_tudo">
            <div class="resizable_tudo resizable_na_tab">
                <p><strong>Em todas as direções ("all" = "s, sw, w, nw, n, ne, e, se")</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({handles: "all"});</span>
            </div>
        </div>
        <div id="tab_resize_parent">
            <div style="width: 500px; height: 200px; border-style: solid; border-width: 1px;">
                <p>Eu sou o elemento pai.</p>
                <div class="resizable_parent resizable_na_tab">
                    <p><strong>Apenas dentro do elemento pai</strong></p>
                    <span class="codigo">$("#meu_resizable").resizable({containment: "parent"});</span>
                </div>
            </div>
        </div>
        <div id="tab_resize_seletor">
            <div style="width: 500px; height: 200px; border-style: solid; border-width: 1px;">
                <p>Eu sou o elemento pai.</p>
                <div class="resizable_container resizable_na_tab">
                    <p><strong>Apenas dentro de um elemento dado por um seletor jQuery</strong></p>
                    <span class="codigo">$("#meu_resizable").resizable({containment: "#minha_area"});</span>
                </div>
            </div>
        </div>
        <div id="tab_resize_grid">
            <div class="resizable_grid resizable_na_tab">
                <p><strong>Apenas em uma grid</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({grid: [30, 15]});</span>
            </div>
        </div>
        <div id="tab_resize_tempo">
            <div class="resizable_tempo resizable_na_tab">
                <p><strong>Apenas após algum tempo</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({delay: 1000});</span>
            </div>
        </div>
        <div id="tab_resize_distancia">
            <div class="resizable_distancia resizable_na_tab">
                <p><strong>Apenas após uma distância ser movimentada</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({distance: 100});</span>
            </div>
        </div>
        <div id="tab_resize_minimo">
            <div class="resizable_minimo resizable_na_tab">
                <p><strong>Com um tamanho mínimo</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({minWidth: 200, minHeight: 50});</span>
            </div>
        </div>
        <div id="tab_resize_maximo">
            <div class="resizable_maximo resizable_na_tab">
                <p><strong>Com um tamanho máximo</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({maxWidth: 600, maxHeight: 20});</span>
            </div>
        </div>
        <div id="tab_resize_proporcao">
            <div class="resizable_proporcao resizable_na_tab">
                <p><strong>Com uma proporção constante pré-definida</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({aspectRatio: 3 / 1});</span>
            </div>
        </div>
        <div id="tab_resize_combinacao">
            <div class="resizable_combinado resizable_na_tab">
                <p><strong>Com uma combinação de efeitos</strong></p>
                <span class="codigo">$("#meu_resizable").resizable({minHeight: 50, maxWidth: 700, delay: 1000, grid: [20, 20]});</span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        inicializador.resizableInit = function() {
            $("#tabs_resizable").tabs();
            $(".resizable_default").resizable();
            $(".resizable_horizontal").resizable({handles: "e, w"});
            $(".resizable_vertical").resizable({handles: "n, s"});
            $(".resizable_estranho").resizable({handles: "n, sw, e"});
            $(".resizable_tudo").resizable({handles: "all"});
            $(".resizable_parent").resizable({containment: "parent"});
            $(".resizable_container").resizable({containment: "#slide_resizable_restringindo"});
            $(".resizable_grid").resizable({grid: [30, 15]});
            $(".resizable_tempo").resizable({delay: 1000});
            $(".resizable_distancia").resizable({distance: 100});
            $(".resizable_minimo").resizable({minWidth: 200, minHeight: 50}).css({width: 600, height: 200});
            $(".resizable_maximo").resizable({maxWidth: 600, maxHeight: 200}).css({width: 100, height: 100});
            $(".resizable_proporcao").resizable({aspectRatio: 3 / 1}).css({width: 300, height: 100});
            $(".resizable_combinado").resizable({minHeight: 50, maxWidth: 700, delay: 1000, grid: [20, 20]}).css({width: 500, height: 100});
        };
    </script>
</div>